<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="账号安全" navbarType='0'></wlk-navbar>
        <view class="set-content">
            <view class="item-cell br08">
                <u-cell-group :border="false">
                    <u-cell  @click="jump('/pages/user/checkcode')" :iconStyle="iconStyle" :titleStyle="itemTitleStyle" center clickable isLink :border="false">
                        <view slot="icon" class="icon-box wlkflex">
                            <i class="gg-lock" style="transform: scale(.9);"></i>
                        </view>
                        <span slot="title" class="title">
                          修改登录密码
                        </span>
                    </u-cell>
                    <u-cell isLink url="/pages/user/changemobile" :iconStyle="iconStyle" :titleStyle="itemTitleStyle" center clickable :border="false">
                        <view slot="icon" class="icon-box wlkflex">
                            <i class="gg-smartphone" style="transform: scale(.9);"></i>
                        </view>
                        <span slot="title" class="title">
                            手机号
                        </span>
                        <span slot="value" class="desc">{{userInfo.mobile?userInfo.mobile:'未绑定'}}</span>
                    </u-cell>

                </u-cell-group>
            </view>
        </view>

	</view>
</template>

<script>
    var _self;
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
    import { toUrl } from '@/wlkutils/tools';
	export default {
        computed: {
            ...mapGetters(['userInfo','themeColor'])
        },
		data() {
			return {
                itemTitleStyle:{
                    color:'#333333',
                },
                iconStyle:{
                    color:'#333333',
                },
			};
		},
        methods: {
            jump(url){
                if(!uni.$u.test.isEmpty(this.userInfo.mobile)){
                    url+='?event=changepwd';
                    toUrl(url);
                }else{
                    this.$u.toast('请先绑定手机号');
                }
            }
        }
	}
</script>

<style lang="scss">
    .set-content{
        width: 92%;
        margin: 30rpx auto 0 auto;
        .item-cell{
            background-color: #FFFFFF;
            margin-top: 50rpx;
            box-shadow: 0 2px 4px rgba(0,0,0,.02);
            .u-cell{
                padding:10rpx 0;

            }
            .icon-box{
                width: 60rpx;
            }
            .title{
                font-size: $font-base;
                font-weight: 600;
            }
            .desc{
                font-size: $font-base;
                line-height: 32rpx;
            }
            .bz{
                font-size: $font-base;
                color: $uni-text-color-grey;
            }
        }
    }
</style>
